<template>
  <div class="app-container">
    <el-form v-model="courseModel" label-width="80px">
      <el-row>
        <el-col :span="8">
          <el-form-item prop="name" label="课程名称">
            <el-input v-model="courseModel.name" name="title" placeholder="请输入课程名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item prop="value" label="分类">
              <el-select v-model="courseModel.grade.code" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item prop="lessonCount" label="课时数量">
              <el-input v-model="courseModel.lessonCount" name="title" type="number" placeholder="请输入数量"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="课程图标">
          <Input type="text" id="upClass"  placeholder="请选择文件路径" disabled="true" :value="courseModel.cover.title" v-model="courseModel.cover.title"  style="width:300px"></Input>
          <input class="file" id="inputFile" name="file" value="请选择2文件" type="file" style="width:60px;float:right;height:36px;position:absolute;opacity:0;cursor:pointer;padding:20px" @change="update"/></input>
          <el-button style="cursor:pointer">浏览</el-button><span><img src="http://qiniu.zhonglongedu.com/1539238021539" v-show="imgShow" style="width: 50px;height: 50px;width: 50px;height: 50px;position: absolute;top: -5px;left: 400px;"></span>
        </el-form-item>
      </el-form>
       <el-button type="primary" @click="saveCourse" :disabled ="buttonShow" style="margin-top: 8px;margin-left: 20px;">确定</el-button>
       <el-button type="primary" @click="saveCourse" v-show="!editable" :disabled="buttonShow" style="margin-top: 8px;margin-left: 20px;">添加下一个</el-button>
  </div>
</template>

<script>
import api from "@/api/upload";
import axios from "axios";
import { cloneDeep, defaultsDeep } from "lodash";
const defaultCourseModel = {
  name: "",
  lessonCount: "",
  grade: {
    code: ""
  },
  cover: {
    contentType: {
      code: "IMAGE"
    },
    url: "",
    title: ""
  }
};

export default {
  data() {
    return {
      courseModel: cloneDeep(defaultCourseModel),
      imgShow: false,
      buttonShow: false,
      editable: false,
      options: [
        {
          value: "101",
          label: "小班"
        },
        {
          value: "102",
          label: "中班"
        },
        {
          value: "103",
          label: "大班"
        }
      ]
    };
  },
  mounted() {
    let oid = this.$route.query.oid;
    if (oid) {
      this.editable = true;
      this.showCurriculumEdit(oid);
    }
  },
  methods: {
    showCurriculumEdit(oid) {
      api.courseGet(oid).then(response => {
        this.courseModel = response;
      });
    },
    saveCourse() {
      let name = this.courseModel.name;
      api.courseEdit(this.courseModel).then(({ success, data }) => {
        this.$message({
          showClose: true,
          message: "编辑成功！",
          type: "success"
        });
        if (this.editable) {
          this.$router.push("/upload");
        } else {
          this.courseModel = cloneDeep(defaultCourseModel);
          this.courseModel.name = name
        }
      });
    },
    update(e) {
      this.imgShow = true;
      this.buttonShow = true;
      let fileData = e.target.files[0];
      axios.get("/qiniu/upload-token").then(res => {
        let data = new FormData();
        let nameDate = new Date().getTime();
        data.append("name", nameDate);
        data.append("key", nameDate);
        data.append("token", res.data.uploadToken);
        data.append("file", fileData);
        axios
          .post("http://upload.qiniu.com", data, { withCredentials: false })
          .then(res => {
            this.imgShow = false;
            this.buttonShow = false;
            this.courseModel.cover.url =
              "http://qiniu.zhonglongedu.com/" + res.data.key;
            this.courseModel.cover.title = fileData.name;
          });
      });
    }
  }
};
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
#upClass {
  width: 420px;
  height: 35px;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
